<template>
  <div class="user" @click.prenvent.stop>
    <div class="user-name" @click="showMenu">
      <slot></slot>
    </div>
    <div id="userdiv" ref="userdiv" class="drop-menu-items" v-click-outside="onClickoutside"
      :class="{ 'drop-menu-open': show == 1, 'drop-menu-close': show == 0 }">
      <template v-for="(item, index) in Array.from(menuitems)">
        <el-tooltip effect="dark" placement="left" :content="item.name" :disabled="index != curentIndex">
          <div class="drop-menu-item" :style="'width:' + rowwidth + 'px;line-height:' + rowheight + 'px;'"
            @click="itemclick(item, index)" @mouseout="curentIndex = -1;" @mouseenter="showtip($event, item, index)">
            <span :class="item.iconname" class="iconfont drop-menu-item-icon "></span>
            {{ item.name }}
          </div>
        </el-tooltip>
      </template>
      <div v-if="placement == 'top'" v-show="show == 1" class="toparrow" ref='arrow'></div>
      <div v-if="placement == 'left'" v-show="show == 1" class="leftarrow" ref='arrow'></div>
      <div v-if="placement == 'right'" v-show="show == 1" class="rightarrow" ref='arrow'></div>
      <div v-if="placement == 'bottom'" v-show="show == 1" class="bottomarrow" ref='arrow'></div>
    </div>
  </div>
</template>

<script>
import clickOutside from "@/directives/clickoutside.js"
import { strLen } from '@/utils/public'
export default {
  name: "userMemu",//下拉菜单	
  directives: { clickOutside },
  props: {
    rowwidth: {
      default: 127
    },
    rowheight: {
      default: 34
    },
    menuitems: null,
    trriger: { default: 'hover' },
    placement: { default: 'top' },
    menuleft: {
      default: 0
    },
    arrowleft: {
      default: 0
    },
    scrollTop: { default: 0 },
    parentitem: { default: null },

  },
  watch: {

  },
  data() {
    return {
      show: -1,
      scrollLeft: 0,
      curentIndex: -1
    }
  },
  computed: {

  },
  methods: {
    onClickoutside() {
      if (this.show == 1) {
        this.show = 0;
        setTimeout(() => {
          this.$emit('close', true);
        }, 300);
      }
    },
    itemclick(item, index) {
      this.show = 0;
      setTimeout(() => {
        this.$emit('dropitemclick', item, index);
        this.$emit('close', true);
      }, 300);
    },
    showMenu(e) {
      if (this.show == 1) {
        this.show = 0
      } else {
        this.show = 1
      }
      this.scrollLeft = e.target.ownerDocument.childNodes[1].scrollLeft;
      let etarget = null;
      if (e.target.className == 'user-name') {
        etarget = e.target;
      } else if (e.target.parentElement.className == 'user-name') {
        etarget = e.target.parentElement;
      } else if (e.target.parentElement.parentElement == 'user-name') {
        etarget = e.target.parentElement.parentElement;
      } else {
        etarget = e.target.parentElement.parentElement.parentElement;
      }
      //e.target.offsetLeft  target.offsetHeight	

      this.$refs.userdiv.style.top = etarget.offsetHeight - this.scrollTop + 'px';
      this.$refs.userdiv.style.left = etarget.offsetLeft - this.scrollLeft + this.menuleft + (this.$refs.userdiv.parentNode.offsetWidth - this.$refs.userdiv.offsetWidth) + 'px';
      this.$refs.arrow.style.top = etarget.offsetHeight - 10 - this.scrollTop + 'px';
      this.$refs.arrow.style.left = etarget.offsetLeft - this.scrollLeft + this.arrowleft + parseInt(this.$refs.userdiv.parentNode.offsetWidth / 2) + 'px';


    },
    showtip(e, item, index) {
      if (strLen(item.name) > 9) {
        this.curentIndex = index;
      }
    }
  },
  mounted() {
    let menuHeight = this.menuitems.length * this.rowheight + 20 + 'px'
    this.$refs.userdiv.style.setProperty('--menu-height', menuHeight);
    this.$refs.userdiv.style.setProperty('--dot-margin-top', (this.rowheight - 6) / 2 + 'px');



  }
}
</script>

<style scoped>		#messagediv {
		  --menu-height: 0px;
		  --dot-margin-top: 0px;
		}

		.user {
		  height: 56px;
		}

		.user-name {
		  display: inline-flex;
		  align-items: center;
		  min-width: 150px;
		  height: 56px;
		}

		.drop-menu-items {
		  background: var(--page-back-color);
		  color: var(--page-lable-text-color);
		  box-shadow: 0px 10px 20px 0px var(--drop-menu-boxshadow-color), 0px -10px 20px 0px var(--drop-menu-boxshadow-color);
		  font-size: 14px;
		  text-align: center;
		  position: fixed;
		  overflow: hidden;
		  z-index: 99;
		  height: 0;
		  border-bottom-right-radius: 6px;
		  border-bottom-left-radius: 6px;
		  opacity: 0.9;

		}

		.drop-menu-open {
		  height: var(--menu-height);
		  ;
		  animation: menuopen 0.3s;
		}

		@keyframes menuopen {
		  from {
		    height: 0;
		  }

		  to {
		    height: var(--menu-height);
		  }
		}

		.drop-menu-close {
		  height: 0;
		  animation: menuclose 0.3s;
		}

		@keyframes menuclose {
		  from {
		    height: var(--menu-height);
		  }

		  to {
		    height: 0;
		  }
		}

		.drop-menu-item {
		  white-space: nowrap;
		  text-overflow: ellipsis;
		  overflow: hidden;
		  cursor: pointer;
		  text-align: left;
		  padding: 0 10px;
		}

		.drop-menu-item:first-child {
		  margin-top: 10px;
		}

		.drop-menu-item:nth-last-child(2) {
		  margin-bottom: 10px;
		}

		.drop-menu-item:hover {
		  background: var(--button-hover-back-color);
		  color: var(--button-active-text-color);
		  cursor: pointer;
		}

		.drop-menu-item:active {
		  background: var(--button-active-back-color);
		  color: var(--button-active-text-color);
		  cursor: pointer;
		}

		.iconbefore {
		  margin-right: 10px;
		  color: var(--icon-color);
		}

		.iconafter {
		  margin-left: 10px;
		  color: var(--icon-new-color);
		}

		.toparrow {
		  position: fixed;
		  border-style: solid;
		  border-width: 0px 10px 10px 10px;
		  border-color: transparent transparent var(--drop-menu-arrow-color) transparent;
		  width: 0px;
		  height: 0px;
		}

		.leftarrow {
		  position: fixed;
		  border-style: solid;
		  border-width: 10px 10px 10px 0px;
		  border-color: transparent var(--drop-menu-arrow-color) transparent transparent;
		  width: 0px;
		  height: 0px;
		}

		.rightarrow {
		  position: fixed;
		  border-style: solid;
		  border-width: 10px 0 10px 10px;
		  border-color: transparent transparent transparent var(--drop-menu-arrow-color);
		  width: 0px;
		  height: 0px;
		}

		.bottomarrow {
		  position: fixed;
		  border-style: solid;
		  border-width: 10px 10px 0 10px;
		  border-color: var(--drop-menu-arrow-color) transparent transparent transparent;
		  width: 0px;
		  height: 0px;
		}

		.drop-menu-item-icon {
		  color: var(--icon-color);
		  width: 38px;
		  margin-left: 10px;
		  font-size: 16px;
		  margin-right: 10px;
		}
</style>